<template>
  <div class="buying-analysis">
    <el-card class="buying-overview" v-loading="loading">
      <template #header>
        <span>购买建议分析</span>
      </template>
      
      <div class="overview-stats">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="stat-item">
              <div class="stat-value">{{ analysisData.categoryAnalysis?.length || 0 }}</div>
              <div class="stat-label">衣服分类</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-item">
              <div class="stat-value">{{ analysisData.suggestions?.length || 0 }}</div>
              <div class="stat-label">购买建议</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-item">
              <div class="stat-value">{{ analysisData.missingItems?.length || 0 }}</div>
              <div class="stat-label">缺失单品</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="stat-item">
              <div class="stat-value">¥{{ totalInvestment }}</div>
              <div class="stat-label">总投资</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-card class="category-analysis" v-loading="loading">
      <template #header>
        <span>分类分析</span>
      </template>
      
      <div class="category-list">
        <div 
          v-for="category in analysisData.categoryAnalysis" 
          :key="category.category"
          class="category-item"
        >
          <div class="category-info">
            <h4>{{ category.category }}</h4>
            <p>{{ category.count }} 件 · 平均价格 ¥{{ category.avgPrice }}</p>
          </div>
          
          <div class="category-diversity">
            <div class="diversity-item">
              <span class="label">颜色:</span>
              <span class="value">{{ category.colorDiversity }} 种</span>
            </div>
            <div class="diversity-item">
              <span class="label">风格:</span>
              <span class="value">{{ category.styleDiversity }} 种</span>
            </div>
          </div>
          
          <div class="category-status">
            <el-tag 
              :type="getCategoryStatus(category).type"
              size="small"
            >
              {{ getCategoryStatus(category).text }}
            </el-tag>
          </div>
        </div>
      </div>
    </el-card>

    <el-card class="buying-suggestions" v-loading="loading">
      <template #header>
        <span>购买建议</span>
      </template>
      
      <div class="suggestions-list">
        <div 
          v-for="suggestion in analysisData.suggestions" 
          :key="suggestion.category"
          class="suggestion-item"
          :class="suggestion.priority"
        >
          <div class="suggestion-icon">
            <el-icon v-if="suggestion.priority === 'high'"><Warning /></el-icon>
            <el-icon v-else-if="suggestion.priority === 'medium'"><InfoFilled /></el-icon>
            <el-icon v-else><Check /></el-icon>
          </div>
          
          <div class="suggestion-content">
            <h4>{{ suggestion.category }}</h4>
            <p>{{ suggestion.reason }}</p>
            <div class="suggestion-meta">
              <el-tag 
                :type="getPriorityType(suggestion.priority)" 
                size="small"
              >
                {{ getPriorityText(suggestion.priority) }}
              </el-tag>
              <span class="suggested-count">建议购买 {{ suggestion.suggestedCount }} 件</span>
            </div>
          </div>
          
          <div class="suggestion-action">
            <el-button size="small" @click="addToShoppingList(suggestion)">
              加入购物清单
            </el-button>
          </div>
        </div>
      </div>
    </el-card>

    <el-card class="missing-items" v-loading="loading">
      <template #header>
        <span>必备单品检查</span>
      </template>
      
      <div class="missing-categories">
        <div 
          v-for="missing in analysisData.missingItems" 
          :key="missing.category"
          class="missing-category"
        >
          <div class="category-header">
            <h4>{{ missing.category }}</h4>
            <span class="current-count">当前: {{ missing.currentCount }} 件</span>
          </div>
          
          <div class="missing-items-list">
            <el-tag 
              v-for="item in missing.missingItems" 
              :key="item"
              type="warning"
              size="small"
              style="margin-right: 8px; margin-bottom: 8px;"
            >
              {{ item }}
            </el-tag>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { analysisAPI } from '@/api'

const loading = ref(false)
const analysisData = reactive({
  categoryAnalysis: [],
  suggestions: [],
  budgetRecommendations: {},
  missingItems: []
})

const totalInvestment = computed(() => {
  return analysisData.budgetRecommendations?.totalInvestment?.toFixed(0) || '0'
})

const loadData = async () => {
  try {
    loading.value = true
    const response = await analysisAPI.getBuyingSuggestion()
    
    if (response.code === 200) {
      Object.assign(analysisData, response.data)
    } else {
      throw new Error(response.message || '获取购买建议数据失败')
    }
  } catch (error) {
    console.error('获取购买建议失败:', error)
    ElMessage.error('获取数据失败')
    
    // 模拟数据
    Object.assign(analysisData, {
      categoryAnalysis: [
        { category: '上装', count: 15, avgPrice: '299', colorDiversity: 8, styleDiversity: 5 },
        { category: '下装', count: 8, avgPrice: '399', colorDiversity: 5, styleDiversity: 3 },
        { category: '外套', count: 5, avgPrice: '899', colorDiversity: 4, styleDiversity: 3 },
        { category: '鞋子', count: 6, avgPrice: '599', colorDiversity: 3, styleDiversity: 4 }
      ],
      suggestions: [
        { category: '下装', priority: 'high', reason: '下装数量不足，建议增加2件', suggestedCount: 2 },
        { category: '配饰', priority: 'medium', reason: '缺少配饰单品，建议增加3件', suggestedCount: 3 }
      ],
      budgetRecommendations: {
        totalInvestment: 12580
      },
      missingItems: [
        { category: '上装', currentCount: 15, missingItems: ['白衬衫', '基础T恤'] },
        { category: '配饰', currentCount: 2, missingItems: ['腰带', '围巾', '帽子'] }
      ]
    })
  } finally {
    loading.value = false
  }
}

const getCategoryStatus = (category) => {
  if (category.count < 5) {
    return { type: 'danger', text: '数量不足' }
  } else if (category.count < 10) {
    return { type: 'warning', text: '数量适中' }
  } else {
    return { type: 'success', text: '数量充足' }
  }
}

const getPriorityType = (priority) => {
  const types = {
    high: 'danger',
    medium: 'warning',
    low: 'info'
  }
  return types[priority] || 'info'
}

const getPriorityText = (priority) => {
  const texts = {
    high: '高优先级',
    medium: '中优先级',
    low: '低优先级'
  }
  return texts[priority] || '普通'
}

const addToShoppingList = (suggestion) => {
  ElMessage.success(`已将${suggestion.category}加入购物清单`)
}

onMounted(() => {
  loadData()
})
</script>

<style scoped>
.buying-analysis {
  space-y: 20px;
}

.buying-overview,
.category-analysis,
.buying-suggestions,
.missing-items {
  margin-bottom: 20px;
}

.stat-item {
  text-align: center;
  padding: 16px;
  border-radius: 8px;
  background: #f8f9fa;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.category-list {
  space-y: 12px;
}

.category-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 12px;
}

.category-info h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  color: #333;
}

.category-info p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.category-diversity {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.diversity-item {
  font-size: 12px;
  color: #666;
}

.diversity-item .label {
  margin-right: 4px;
}

.diversity-item .value {
  font-weight: 500;
  color: #333;
}

.suggestions-list {
  space-y: 12px;
}

.suggestion-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 12px;
}

.suggestion-item.high {
  border-color: #f56c6c;
  background: #fef0f0;
}

.suggestion-item.medium {
  border-color: #e6a23c;
  background: #fdf6ec;
}

.suggestion-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 18px;
}

.suggestion-item.high .suggestion-icon {
  background: #f56c6c;
  color: white;
}

.suggestion-item.medium .suggestion-icon {
  background: #e6a23c;
  color: white;
}

.suggestion-item:not(.high):not(.medium) .suggestion-icon {
  background: #67c23a;
  color: white;
}

.suggestion-content {
  flex: 1;
}

.suggestion-content h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  color: #333;
}

.suggestion-content p {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #666;
}

.suggestion-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.suggested-count {
  font-size: 12px;
  color: #999;
}

.missing-categories {
  space-y: 16px;
}

.missing-category {
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 16px;
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.category-header h4 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.current-count {
  font-size: 12px;
  color: #666;
}

.missing-items-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 768px) {
  .category-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .suggestion-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .suggestion-icon {
    margin-right: 0;
  }
  
  .category-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}
</style>
